<template>
  <el-card class="charts">
    <el-row slot="header" type="flex" justify="space-between">
      <span>销售走势</span>
      <div class="tool-bar">
        <i @click="reloadTrend" class="el-icon-fa-refresh"></i>
      </div>
    </el-row>
    <chart :options="polylineOpt" auto-resize/>
  </el-card>
</template>

<script>
  import "echarts/lib/chart/line";
  import { util } from "@/config";

  export default {
    name: "line_view",
    data() {
      return {
        trend: [], // 趋势
      };
    },
    mounted() {
      this.reloadTrend();
    },
    computed: {
      polylineOpt() {
        const me = this;
        return {
          tooltip: {
            formatter: "{b}月交易量{c}万"
          },
          xAxis: {
            name: "日期",
            type: "category",
            data: me.trend.map(function(item) {
              return item.name;
            }),
            axisTick: {
              alignWithLabel: true
            }
          },
          yAxis: {
            name: "交易量",
            type: "value",
            axisLabel: {
              formatter: "{value}万"
            }
          },
          series: [{
            name: "销售趋势",
            type: "line",
            data: me.trend.map(function(item) {
              return item.value;
            }),
          }]
        };
      }
    },
    methods: {
      reloadTrend() {
        this.getTrend().then(trend => {
          this.trend = trend;
        });
      },
      getTrend() {
        let day = util.random(8, 12);
        const data = [];
        while (day-- > 1) {
          data.unshift({
            value: util.random(400, 100),
            name: `${day}`
          });
        }
        return Promise.resolve(data);
      }
    }
  };
</script>
